//
//  RingView.swift
//  SwiftUiBaseStudy
//
//  Created by Daniel on 2023/10/23.
//

import SwiftUI

struct RingView: View {
    var color1 = #colorLiteral(red: 0.2588235438, green: 0.7568627596, blue: 0.9686274529, alpha: 1)
    var color2 = #colorLiteral(red: 0.5568627715, green: 0.3529411852, blue: 0.9686274529, alpha: 1)
    var width:CGFloat = 44
    var height:CGFloat = 44
    var percent:Double = 82
    @Binding var show:Bool
    var body: some View {
        ZStack {
            // 进度值
            let progress = (100 - percent) / 100
            // 比例系数
            let multiplier = width / 44
            // 背景轨迹
            Circle()
                .stroke(.black.opacity(0.1), style: StrokeStyle(lineWidth: 5 * multiplier,lineCap: .round))
                .frame(width: width,height: height)
            // 进度条
            Circle()
                .trim(from: show ? progress : 1,to: 1)
                .stroke(LinearGradient(gradient: Gradient(colors: [Color(color1), Color(color2)]), startPoint: .topTrailing, endPoint: .bottomLeading), style: StrokeStyle(lineWidth: 5 * multiplier,lineCap: .round))
                .animation(.easeInOut.delay(0.3), value: show)
                .frame(width: width,height: height)
                .rotationEffect(Angle(degrees: 90))
                .rotation3DEffect(
                    Angle(degrees: 180),
                    axis: (x: 1.0, y: 0.0, z: 0.0)
                )
                .shadow(color: Color(color2).opacity(0.3), radius: 3 * multiplier,x:0,y:3 * multiplier)
            // 文字
            Text("\(Int(percent))%")
                .font(.system(size:14 * multiplier))
                .bold()
               
        }
    }
}

#Preview {
    RingView(color1: .red,width: 88,height: 88,show: .constant(true))
}
